<template>
    <el-dialog :title="title" v-model="isVisibleShow" width="1000px">
        <!-- tab标签页设置 上下移动的效果-->
        <el-tabs :tab-position="'top'">
            <el-tab-pane v-if="title=='编辑'" label="基本信息">
                <el-row :gutter="20">
                    <!-- 把右边所有数据放在from中 方便显示label 输入框前面的标题 -->
                    <el-form label-width="100px" :model="popData">

                        <el-col :span="8">
                            <el-form-item label="资产编号">
                                <el-input disabled='true' v-model="popData.identityUuid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" style="display: none">
                            <el-form-item label="资产id">
                                <el-input disabled='true' v-model="popData.id"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="盘点情况">
                                <el-input v-model="popData.inventorySituation"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="用途">
                                <el-input v-model="popData.usePurpose"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="存放点">
                                <el-select v-model="popData.storageConfigId" class="m-2" placeholder="请选择"
                                           size="large" filterable>
                                    <el-option v-for="item in storageConfigOptions" :key="item.value"
                                               :label="item.label" :value="item.value"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="部门对接人">
                                <el-select
                                    v-model="popData.hookUpUserId"
                                    filterable
                                    remote
                                    :remote-method="remoteMethod"
                                    @change="selectInputChange"
                                    clearable
                                    reserve-keyword
                                    placeholder="请选择"
                                    @focus="focus('hookUpUserId')"
                                >
                                    <el-option
                                        v-for="item in hookUpUserOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="借用人">
                                <el-input disabled=true v-model="popData.lendUser"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="使用人">
                                <el-select
                                    v-model="popData.usingId"
                                    filterable
                                    remote
                                    :remote-method="remoteMethod"
                                    @change="selectInputChange"
                                    clearable
                                    reserve-keyword
                                    placeholder="请选择"
                                    @focus="focus('usingId')"
                                >
                                    <el-option
                                        v-for="item in usingConfigOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="备注">
                                <el-input v-model="popData.remark"></el-input>
                            </el-form-item>
                        </el-col>

                        <!--                        <el-col :span="8">-->
                        <!--                            <el-form-item label="验收时间">-->
                        <!--                                <el-date-picker v-model="popData.checkTime" type="datetime" format="YYYY/MM/DD hh:mm:ss"-->
                        <!--                                                value-format="YYYY-MM-DD h:m:s" placeholder="验收日期"-->
                        <!--                                                style="width: 100%"></el-date-picker>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->

                        <el-col :span="8" style="visibility:hidden">
                            <el-form-item label="照片">
                                <el-input v-model="popData.photo"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-form>
                </el-row>
            </el-tab-pane>

            <el-tab-pane v-if="title=='借用' || title == '归还'" label="基本信息">
                <el-row :gutter="20">
                    <!-- 把右边所有数据放在from中 方便显示label 输入框前面的标题 -->
                    <el-form label-width="100px" :model="lendingData">
                        <el-col :span="0" style="visivisibility: hidden;">
                            <el-form-item :label="title+'人id'">
                                <el-input disabled=true v-model="lendingData.lendingId"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- UUID -->
                        <el-col :span="0" style="visivisibility: hidden;">
                            <el-form-item :label="UUID">
                                <el-input disabled=true v-model="lendingData.identityUuid"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8" style="display: none">
                            <el-form-item label="资产id">
                                <el-input v-model="lendingData.assetId" disabled=true></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="借用人">
                                <el-input disabled=true v-model="lendingData.lendUser"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8" v-if="title=='借用'">
                            <el-form-item label="使用人">
                                <el-select
                                    v-model="lendingData.usingId"
                                    filterable
                                    remote
                                    :remote-method="remoteMethod"
                                    @change="selectInputChange"
                                    clearable
                                    reserve-keyword
                                    placeholder="请输入"
                                    @focus="focus('usingId')"
                                >
                                    <el-option
                                        v-for="item in usingConfigOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8" v-if="title=='归还'">
                            <el-form-item label="归还人">
                                <el-select
                                    v-model="lendingData.usingId"
                                    filterable
                                    remote
                                    :remote-method="remoteMethod"
                                    @change="selectInputChange"
                                    clearable
                                    reserve-keyword
                                    placeholder="请输入"
                                    @focus="focus('usingId')"
                                >
                                    <el-option
                                        v-for="item in usingConfigOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="审批人">
                                <!-- <el-select-v2 v-model="lendingData.examineConfigId" style="width: 240px" multiple filterable remote :remote-method="remoteMethod" clearable :options="organizationOptions" :loading="loading" placeholder="Please enter a keyword" /> -->
                                <el-select v-model="lendingData.examineConfigId" class="m-2" placeholder="请选择"
                                           size="large" filterable>
                                    <el-option v-for="item in organizationOptions" :key="item.value" :label="item.label"
                                               :value="item.value"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="title=='借用'">
                            <el-form-item label="预计归还时间">
                                <el-date-picker v-model="lendingData.returnTime" type="datetime"
                                                format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s"
                                                placeholder="选择日期" style="width: 100%"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="备注">
                                <el-input v-model="lendingData.remark"></el-input>
                            </el-form-item>
                        </el-col>


                    </el-form>
                </el-row>
            </el-tab-pane>
            <!-- <el-tab-pane label="配置项">

			</el-tab-pane> -->
        </el-tabs>
        <!-- :plain="true"鼠标移入效果 -->
        <el-row style="padding-left: 770px">
            <el-button type="primary" @click="confirm" :loading="returnBtnLoading">确定</el-button>
            <el-button type="danger" @click="switchVisible">取消</el-button>
        </el-row>
    </el-dialog>
</template>

<script>
import {reactive, ref, toRaw} from "vue";
import {ElMessage} from "element-plus";
import {assetReturn, getAllUserData, lendingAsset, updateAsset} from "@/api/asset";
import {transformLabelData} from "@/utils/util";
import moment from 'moment';

export default {
    props: ["isVisible"],
    setup(props, {
        attrs,
        slots,
        emit
    }) {
        let isVisibleShow = ref(false);
        let popData = reactive({
            "assetOriginalId": "",
            "checkTime": "",
            "hookUpUser": "",
            "hookUpUserId": "",
            "id": "",
            "identityUuid": "",
            "inventorySituation": "",
            "materialConfiId": "",
            "materialConfig": "",
            "photo": "null",
            "storageConfig": "",
            "storageConfigId": "",
            "usePurpose": "",
            "usingId": "",
            "usingUser": "",
        });
        let lendingData = reactive({
            "lendingId": '',
            "lendUser": '',
            "assetId": '',
            "remark": '',
            "returnTime": '',
            "usingId": '',
            "usingUser": '',
            "identityUuid": '',
            "examineConfigId": '',
            "applicantUserId": '',
            "applicantUserName": ""
        })
        const assetsConfigOptions = ref([]);
        const hookUpUserOptions = ref([]);
        const storageConfigOptions = ref([]);
        const materialConfigOptions = ref([]);
        const title = ref('');
        const organizationOptions = ref([]);
        const focusItem = ref(null);
        let userInfo = window.localStorage.getItem('userInfo');
        let user = "";
        const loading = ref(false);
        try {
            user = JSON.parse(userInfo);
        } catch (error) {

        }
        // let user = JSON.parse(userInfo);

        const returnBtnLoading = ref(false)
        const switchVisible = (rowData, tit) => {
            title.value = tit;
            hookUpUserOptions.value = [];
            usingConfigOptions.value = [];
            isVisibleShow.value = !isVisibleShow.value;
            if (tit == '借用' || tit == '归还') {
                try {
                    // hookUpUserOptions.value = JSON.parse(sessionStorage.getItem('userTypeConfigData'));
                    organizationOptions.value = JSON.parse(sessionStorage.getItem('organizationOptions'));
                } catch (error) {

                }
                if (rowData.assertName.includes('MTB/MDC')) {
                    organizationOptions.value = organizationOptions.value.filter(item => {
                        return item.value == 25
                    })
                } else {
                    organizationOptions.value = organizationOptions.value.filter(item => {
                        return item.value != 25
                    })
                }
                lendingData.usingId = '';
                lendingData['assetId'] = rowData.id;
                // lendingData['lendingId'] = user.employeeId;
                lendingData['lendingId'] = user.id;
                lendingData['lendUser'] = user.username;
                lendingData['applicantUserId'] = user.id;
                lendingData['applicantUserName'] = user.username;
                // if(tit =='归还'){
                //     lendingData['assetUuid'] = rowData.identityUuid;
                // }

            } else if (tit == '编辑') {
                try {
                    assetsConfigOptions.value = JSON.parse(sessionStorage.getItem('assetsTypeConfigData'));
                    // hookUpUserOptions.value = JSON.parse(sessionStorage.getItem('userTypeConfigData'));
                    storageConfigOptions.value = JSON.parse(sessionStorage.getItem('storageTypeConfigData'));
                    materialConfigOptions.value = JSON.parse(sessionStorage.getItem('materialTypeConfigData'));
                } catch (error) {

                }
                popData.assetOriginalId = rowData.assetOriginalId;
                popData.checkTime = rowData.checkTime;
                popData.identityUuid = rowData.identityUuid;
                popData.inventorySituation = rowData.inventorySituation;
                popData.materialConfiId = rowData.materialConfiId;
                popData.photo = rowData.photo;
                popData.storageConfigId = rowData.storageConfigId;
                popData.usePurpose = rowData.usePurpose;

                //借用人
                popData['lendUser'] = user.username;
                popData['lendingId'] = user.id;
                //部门对接人
                popData.hookUpUserId = rowData.hookUpUserId;
                popData.hookUpUser = rowData.hookUpUser;
                //使用人
                popData.usingId = rowData.usingId;
                popData.usingUser = rowData.usingUser;

                //通过id查人名  避免有重名的情况
                remoteMethod('', 'hookUpUserId', rowData.hookUpUserEntity.employeeId);
                remoteMethod('', 'usingId', rowData.usingUserEntity?.employeeId);

            }

            popData.id = rowData.id;
            // popData.asserSpecifications = rowData.asserSpecifications;
            // popData.assertClass = rowData.assertClass;
            // popData.assertClassId = rowData.assertClassId;
            // popData.assertName = rowData.assertName;
            // popData.assertType = rowData.assertType;
            // popData.remark = rowData.remark;

        };

        const replyMsgFn = () => {
        }
        const confirm = () => {
            if (title.value == '借用') {
                lendingAsset(lendingData).then(res => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: '借用成功',
                            type: 'success',
                        })
                        emit('replyMsgFn', 'success')
                    } else {
                        ElMessage({
                            message: '借用失败',
                            type: 'error',
                        })
                    }
                    isVisibleShow.value = !isVisibleShow.value;

                })
            } else if (title.value == '归还') {
                returnBtnLoading.value = true;
                assetReturn(lendingData).then(res => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: '归还成功',
                            type: 'success',
                        })
                        returnBtnLoading.value = false;
                        emit('replyMsgFn', 'success')
                    } else {
                        ElMessage({
                            message: '归还失败',
                            type: 'error',
                        })
                    }
                    isVisibleShow.value = !isVisibleShow.value;
                })
            } else if (title.value == '编辑') {
                popData.storageConfig = transformLabelData(popData.storageConfigId, storageConfigOptions.value);
                popData.materialConfig = transformLabelData(popData.materialConfiId, materialConfigOptions.value);
                const resData = toRaw(popData);
                updateAsset(resData).then(res => {
                    if (res.status == 200) {
                        ElMessage({
                            message: '更新成功',
                            type: 'success',
                        })
                        emit('replyMsgFn', 'success')
                    } else {
                        ElMessage({
                            message: '更新失败',
                            type: 'error',
                        })
                    }
                    isVisibleShow.value = !isVisibleShow.value;
                })
            }
        }

        const optionDetailList = ref([]);
        const usingConfigOptions = ref([]);
        const remoteMethod = (query, userId, id) => {
            hookUpUserOptions.value = [];
            usingConfigOptions.value = [];
            if (query !== '' || id != '') {
                getAllUserData({
                    username: query,
                    employeeId: id
                }).then((res) => {
                    if (res.data.code == 200) {
                        res.data.data.records.forEach((item, index) => {
                            if (focusItem.value === 'hookUpUserId' || userId == 'hookUpUserId') {
                                hookUpUserOptions.value.push({
                                    value: item.id,
                                    label: item.username + '/' + item.employeeId
                                })
                            } else if (focusItem.value === 'usingId' || userId == 'usingId') {
                                usingConfigOptions.value.push({
                                    value: item.id,
                                    label: item.username + '/' + item.employeeId
                                })
                            }
                        })
                        optionDetailList.value = res.data.data.records;
                    }
                })
            } else {
                hookUpUserOptions.value = [];
                usingConfigOptions.value = [];
            }
        }
        const selectInputChange = (val) => {
            let user = optionDetailList.value.find((item) => {
                return item.id == val
            })
            if (focusItem.value === 'hookUpUserId') {
                popData.hookUpUser = user.username + '/' + user.employeeId;
            } else if (focusItem.value === 'usingId') {
                popData.usingUser = user.username + '/' + user.employeeId;
                lendingData.usingUser = user.username + '/' + user.employeeId;
            }
        }

        const focus = (focus) => {
            focusItem.value = focus;
        }
        return {
            isVisibleShow,
            switchVisible,
            popData,
            title,
            confirm,
            lendingData,
            hookUpUserOptions,
            assetsConfigOptions,
            storageConfigOptions,
            materialConfigOptions,
            organizationOptions,
            loading,
            remoteMethod,
            selectInputChange,
            usingConfigOptions,
            optionDetailList,
            focus,
            returnBtnLoading
        };
    }
};
</script>

<style scoped>

</style>
